import { memo, useRef, useState } from 'react'

type ChildProps = {
  user: { age: number }
}

const Child = memo(({ user }: ChildProps) => {
  console.log('Child 组件更新')

  return (
    <div style={{ backgroundColor: 'lightsteelblue', padding: 5 }}>子组件2 - 年龄： {user.age}</div>
  )
})

function App() {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('lightseagreen')

  // const user = { age: 18 }

  // useRef Hook
  // useRef 创建的对象在组件更新期间保持(引用)不变
  // 所以，通过 current 属性，获取到的值也保持引用不变
  const userRef = useRef({ age: 15 })

  // 注意：
  // 这种用法只适用于不包含 state / props 的对象，因为其引用不变的特征，会导致无法获取到最新值
  // 所以，对于包含 state / props 的对象，还应该使用 useMemo Hook
  // const userRef = useRef({ age: count })

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button
        onClick={() => setTheme(theme === 'lightseagreen' ? 'lightskyblue' : 'lightseagreen')}
      >
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />
      {/* 子组件 */}
      <Child user={userRef.current} />
    </div>
  )
}

export default App
